<template>
  <div class="data_main">
    <con-title :topTitle="topTitle"/>
    <over-view :show="[true, true, false]"></over-view>
    <div
      class="kuai_con"
      v-for="(i, key) in sensorList"
      :key="Math.random() + key"
    >
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ key }}</span>
        </div>
        <div class="node_con">
          <div class="node" v-for="item in i" :key="Math.random() + item">
            <p>
              <span class="iconfont" :class="item.online ? 'green' : ''">&#xe60c;</span>
              <span class="iconfont" v-show="item.powerNum<20">&#xe607;</span>
            </p>
            <p class="node_info">{{ item.devValue }}</p>
            <p class="node_title">{{ item.devName }}</p>
            <p class="node_code">EUI:{{ item.eui }}</p>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import OverView from "@/components/home/OverView.vue";
import ConTitle from '@/components/ConTitle.vue';
import { $sensorList } from "@/api/api.js";

export default {
  name: "dashboarddata",
  data() {
    return {
      sensorList: [],
      topTitle:{
       type:"",
       text:"设备列表",
       msg:"监控所有设备状态"
     }
    };
  },
  components: {
    OverView,ConTitle
  },
  created() {
    this.getSensorList();
  },
  methods: {
    getSensorList() {
      $sensorList().then((res) => {
        let obj = res.data.data;
        let newObj = {};
        for (let i in obj) {
          if (obj[i] != "") {
            newObj[i] = obj[i];
          }
        }

        for (let i in newObj) {
          for (let j = 0; j < newObj[i].length; j++) {
            if (newObj[i][j].powerNum < 20) console.log(newObj[i][j].powerNum);
          }
        }
        this.sensorList = newObj;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.data_main {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;

  .kuai_con {
    width: 100%;
    margin-bottom: 10px;
    .node_con {
      width: 100%;
      min-height: 200px;
      display: flex;
      flex-wrap: wrap;

      .node {
        width: 195px;
        height: 150px;
        border-radius: 5px;
        border: 1px solid rgb(233, 233, 233);
        display: flex;
        flex-direction: column;
        padding-top: 1px;
        margin: 5px;
        justify-content: space-between;
        position: relative;
        font-size: 14px;
        box-shadow: 0 0 10px 2px rgb(243, 243, 243);

        .iconfont:first-child{
          font-size: 50px;
          transform: rotate(180deg);
          color: gray;
        }

        .iconfont:nth-of-type(2){
          color: red;
        }

        .green {
          color: rgb(0, 216, 0) !important;
        }

        p {
          text-align: center;
        }
        .node_info {
          font-size: 16px;
          font-weight: bold;
        }
        .node_code {
          height: 30px;
          line-height: 30px;
          background-color: #f3f4f6;
        }
      }
    }
  }

  .title_content {
    text-align: left;

    span:nth-of-type(1) {
      font-size: 17px;
      font-weight: bold;
    }
  }
}
</style>